<template>
	<view>
		详情页面
		<my-swiper :list="list" :autoplay="autoplay"  @show="showPreviewImg" :interval="interval" :duration="duration"></my-swiper>
		<view>{{info.name}}</view>
		<view v-for="item in info.img">
			<image class="img" :src="item"></image>
		</view>
		 <previewImage  v-show="flag" ref="previewImage" :imgs="info.img" :descs="descs" @longPress="longPress"></previewImage>

	</view>
</template>

<script>
	import {
		goodsQuery
	} from "@/service/homeService.js"
	import mySwiper from  "@/components/myswiper/index.vue"
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';

	export default {
		components:{
			mySwiper,
			previewImage
		},
		data() {
			return {
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: [],//轮播图的图片
				info: {},
				descs:[],//图片描述的集合
				flag:false,

			}
		},
		methods: {
			longPress(){},
			
			showPreviewImg(){
				this.flag = true;
			}
			

		},
		async onLoad({
			id
		}) {
			let res = await goodsQuery({
				id
			});
			this.info = res.data[0]; //id是主键 主键是唯一的
			this.list  = res.data[0]["img"].map((item,index)=>{  //重新整合满足组件要用的数据
				return  {
					id:index,
					img:item
				}
			})
			this.descs  = res.data[0]["img"].map((img,index)=>{
				return  this.info.name+(index+1)+"的描述"
			})
		}
	}
</script>

<style>
.img{
	width: 100%;
}
</style>
